<template>
  <Layer :layer="layer" ref="layerDom">
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="常规" name="1">
          <el-form-item label="允许评论" prop="disallowComment">
            <el-switch v-model="form.disallowComment"/>
          </el-form-item>
          <el-form-item label="文章标题" prop="title">
            <el-input v-model="form.title" placeholder="请输入文章标题"></el-input>
          </el-form-item>
          <el-form-item label="标签" prop="tags">
            <el-select fit-input-width v-model="form.tags" multiple filterable :multiple-limit="10" allow-create
                       default-first-option :reserve-keyword="false" placeholder="请输入或选择标签">
              <el-option v-for="item in tagOptions" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="高级" name="2">
          <el-form-item label="访问密码" prop="password">
            <el-input v-model="form.password" placeholder="请输入访问密码"></el-input>
          </el-form-item>
          <el-form-item label="封面图" prop="thumbnail">
            <el-input v-model="form.thumbnail" placeholder="请输入名称"></el-input>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="SEO" name="3">
          <el-form-item label="自定义关键字" prop="metaKeywords">
            <el-input :autosize="{ minRows: 4, maxRows: 4 }" type="textarea" v-model="form.metaKeywords"
                      placeholder="多个关键字以英文,隔开,不填写将以标签作为关键字"></el-input>
          </el-form-item>
          <el-form-item label="自定义描述" prop="metaDescription">
            <el-input :autosize="{ minRows: 4, maxRows: 4 }" type="textarea" v-model="form.metaDescription"
                      placeholder="不填写将从文章中自动截取"></el-input>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <div style="padding:10px;text-align: center;">
      <el-button @click="updateStatus(form,2)" type="danger">保存为笔记</el-button>
      <el-button @click="updateStatus(form,1)" type="primary">发布</el-button>
      <el-button @click="layer.show =false">取消</el-button>
    </div>
  </Layer>
</template>

<script lang="ts" setup>
import type {LayerType} from "@/components/layer/index.vue";
import Layer from "@/components/layer/index.vue";
import type {Ref} from "vue";
import {ref} from "vue";
import type {ElFormItemContext} from "element-plus/lib/el-form/src/token";
import type {TabsPaneContext} from 'element-plus'
import {ElMessage} from "element-plus";
import {pushPost} from "@/api/article/post";

const props = defineProps({
  layer: {
    type: Object,
    default() {
      return {
        show: false,
        title: "",
        showButton: true,
      };
    },
  },
});
const activeName = ref('1')
const ruleForm: Ref<ElFormItemContext | null> = ref(null);
const layerDom: Ref<LayerType | null> = ref(null);
const emits = defineEmits(["getPostData", "getTableData"]);
let form = ref({
  title: "",
  password: "",
  thumbnail: "",
  status: 0,
  tags: [],
  disallowComment: true,
  metaKeywords: '',
  metaDescription: ''
});

const rules = {
  title: [{required: true, message: "请输入文章标题", trigger: "blur"}]
};

const tagOptions = [
  {
    value: 'HTML',
    label: 'HTML',
  },
  {
    value: 'CSS',
    label: 'CSS',
  },
  {
    value: 'JavaScript',
    label: 'JavaScript',
  },
]

init();

function init() {
  // 用于判断新增还是编辑功能
  if (props.layer.row) {
    form.value = JSON.parse(JSON.stringify(props.layer.row)); // 数量量少的直接使用这个转
  } else {
  }
}

// 切换标签
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

//提交事件
const submit = () => {
  ruleForm.value.validate((valid: boolean) => {
    if (valid) {
      let params = form.value;
      if (props.layer.row) {
        updateForm(params);
      } else {
        addForm(params);
      }
    } else {
      return false;
    }
  });
};

// 新增提交事件
const addForm = (params: object) => {
  pushPost(params).then((res) => {
    ElMessage({
      type: "success",
      message: "新增成功",
    });
    props.layer.show = false;
  });
};

//修改状态
const updateStatus = (params: any, status: number) => {
  params.status = status
  updateForm(params)
}

//修改状态
const updateForm = (params: any) => {
  pushPost(params).then((res) => {
    ElMessage({
      type: "success",
      message: "修改成功",
    });
    props.layer.show = false;
  });
  emits("getTableData", true);
}

</script>

<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>